<template>
	<view>
		<!-- @touchmove.stop.prevent="discard" -->
		<view class="input-box" v-if="disabledSay">
			<view style="text-align: center !important;width:750upx;line-height: 100upx;border-top: #c9c9c9 solid 2upx;">
				禁 言 中 ...
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass" v-else>
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="icon" :class="isVoice ? 'jianpan' : 'yuyin'" @tap="switchVoice"></view>
			</view>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view
						class="voice-mode"
						:class="[isVoice ? '' : 'hidden', recording ? 'recording' : '']"
						@touchstart="voiceBegin"
						@touchmove.stop.prevent="voiceIng"
						@touchend="voiceEnd"
						@touchcancel="voiceCancel"
				>
					{{ voiceTis }}
				</view>
				<view class="text-mode" :class="isVoice ? 'hidden' : ''">
					<view class="box">
                        <textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" :maxlength="-1"
								  :show-confirm-bar="false" style="max-height: 190upx;overflow:auto" :disabled="disabledSay===1"/>
					</view>

					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>

			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice ? 'hidden' : ''" @tap="sendText(textMsg)">
				<view class="btn">发送</view>
			</view>
		</view>
		<!-- #ifndef H5 -->
		<!-- 录音UI效果 -->
		<view class="record" :class="recording ? '' : 'hidden'">
			<view class="ing" :class="willStop ? 'hidden' : ''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop ? '' : 'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name:'footer-input',
		props: {
			isVoice: {
				type: Boolean,
				default: false
			},
			disabledSay: {
				type: Number,
				default: 0
			},
			popupLayerClass: {
				type: String,
				default: ''
			},
			textMsg2:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				placeholder: '',
				initPoint:{identifier:0,Y:0},
				//播放语音相关参数
				AUDIO:null,
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER:uni.getRecorderManager(),
				// #endif
				recordTis:"手指上滑取消发送",
				voiceTis:'按住说话',
				recording:false,
				willStop:false,
				recordTimer:null,
				recordLength:0,
				textMsg:'',
			};
		},
		watch:{
			textMsg:function(v){
				this.$emit('textMsgFunc',v)
				this.textMsg = v
			},
			textMsg2:function(v){
				this.textMsg = v
			}
		},
		onLoad() {
			// #ifndef H5
			this.RECORDER.onStart((e)=>{
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e)=>{
				this.recordEnd(e);
			})
			// #endif
		},
		onUnload(){

		},
		methods:{
			discard(){
				return false;
			},
			sendText(msg){
				this.$emit('sendText', msg);
				this.textMsg = ''
			},
			sendMsg(msg,type){
				this.$emit('sendMsg', msg,type);
				this.textMsg = ''
			},
			textareaFocus(){
				this.$emit('textareaFocus', true);
			},
			// 选择表情
			chooseEmoji(){
				this.$emit('chooseEmoji', true);
			},
			// 切换语音/文字输入
			switchVoice(){
				this.$emit('switchVoice', true);
			},
			// 录音开始
			voiceBegin(e){
				if(e.touches.length>1){
					return ;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({format:"mp3"});//录音开始,
			},
			//录音开始UI效果
			recordBegin(e){
				this.recording = true;
				this.voiceTis='松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(()=>{
					this.recordLength++;
				},1000)
			},
			// 录音被打断
			voiceCancel(){
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true;//不发送录音
				this.RECORDER.stop();//录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e){
				if(!this.recording){
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if(this.initPoint.Y - touche.clientY>=uni.upx2px(100)){
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				}else{
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e){
				if(!this.recording){
					return;
				}
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop();//录音结束
			},
			//录音结束(回调文件)
			recordEnd(e){
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					//console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath
					};
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					if (min > 0 || sec > 0) {
						msg.length = min + ':' + sec;
						this.sendMsg(msg, 1);
					}
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			//更多功能(点击+弹出)
			showMore(){
				this.$emit('showMore', true);
			},
			// 打开抽屉
			openDrawer(){
				this.$emit('openDrawer', true);
			},
			// 隐藏抽屉
			hideDrawer(){
				this.$emit('hideDrawer', true);
			},
		}
	}
</script>

<style lang="scss">
@import "@/static/css/chat/style.scss";
</style>